<template>
  <el-table :data="processTableData" border :show-header="false"
  :span-method="handleSpanMethod"
  height="300"
  :row-class-name="tableRowClassName"
  >
    <el-table-column 
      v-for="(column, index) in columns" 
      :key="index" 
      :prop="column.prop" 
      :width="column.width"
      :label="column.label">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  props: ["tableData"],
  data() {
    return {
      list:  [],
      groupedData: [], // 分组后的数据
      years: [], // 年份列表
      columns: []
    };
  },
  computed: {
    processTableData(value){
      console.log('value------', value)
      // 根据 project_name 进行排序
      let list = [...this.tableData].sort((a, b) => {
          if (a.project_name < b.project_name) {
            return -1;
          } else if (a.project_name > b.project_name) {
            return 1;
          } else {
            return 0;
          }
        });
      list = list.map((item)=> {
        return {
          ...item,
          ysTarget: '营收指标（科研口径）',
          jlrTarget: '净利润指标'
        }
      })
      console.log('list-----',list)
      let groupedData = list.reduce((result, item) => {
          let project = result.find(project => project.project_name === item.project_name);
          if (project) {
            project.data.push(item);
          } else {
            result.push({
              project_name: item.project_name,
              data: [item]
            });
          }
          return result;
        }, []);
        // 在根据年限进行分组,相同年份的数据进行相加
        groupedData.forEach((item)=>{
          let obj = {}
          item.data.forEach((item2)=>{
            if(obj[item2.year]){
              obj[item2.year]['businessIncomeTotalIndex'] += item2.businessIncomeTotalIndex
              obj[item2.year]['netProfitTotalIndex'] += item2.netProfitTotalIndex
            } else {
              obj[item2.year] = {
                businessIncomeTotalIndex: item2.businessIncomeTotalIndex,
                netProfitTotalIndex:item2.netProfitTotalIndex
              }
            }
          })
          item.handleData = obj
        })
        console.log('groupedData-----',groupedData)
        let result = []
        groupedData.forEach((item)=>{
            console.log('item----', item)
            let years = [item.project_name, '指标']
            let businessIncomeTotalIndexs = [item.project_name, '营收指标（可研口径）']
            let netProfitTotalIndexs = [item.project_name, '净利润指标']
            for(let key in item.handleData){
              let item2 = item.handleData[key]
              console.log('item2',item2)
              years.push(key+'年')
              businessIncomeTotalIndexs.push(item2.businessIncomeTotalIndex)
              netProfitTotalIndexs.push(item2.netProfitTotalIndex)
            }
            result.push(years)
            result.push(businessIncomeTotalIndexs)
            result.push(netProfitTotalIndexs)
            years = []
        })
        let arr = []
        let columns = []
        result.forEach((item,index)=>{
          let obj = {}
           item.forEach((item2,index2)=>{
              obj['value'+index2] = item2
              if(index==0){
                let columnObj = {}
                columnObj['prop'] = 'value'+index2
                if(index2==0){
                  columnObj['width'] = '120'
                }
                columns.push(columnObj)
              }
           })
           arr.push(obj) 
        })
        console.log('arr--------', arr,columns)
        this.columns = columns
      return arr
    }
  },
  watch: {
    
  },
  mounted() {

  },
  methods: {
    tableRowClassName({row, rowIndex}) {
        // if (rowIndex%2 === 1) {
        //   return 'warning-row';
        // } 
        return '';
    },
    handleSpanMethod({ row, column, rowIndex, columnIndex }){
      if (columnIndex === 0) {
        // 合并 year 单元格
        // console.log('处理行row------', row, row.year,row.month)
        if (rowIndex === 0 || row.value0 !== this.processTableData[rowIndex - 1].value0) {
          const rowspan = this.getRowspan(row.value0);
          console.log('rowSpan-----', rowspan)
          return { rowspan, colspan: 1 };
        } else {
          return { rowspan: 0, colspan: 0 };
        }
      } 
    },
    getRowspan(value0) {
      console.log('value0----', value0)
      const count = this.processTableData.filter(item => item.value0 === value0).length;
      return count;
    },
  }
};
</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>